<template>
  <el-card class="box-card">
    <div>入库</div>
    <el-divider></el-divider>
   <div class="form">
      <el-form  class="demo-ruleForm" label-width="220px" :rules="rules" ref="onRemoveRuleForm" :model="remove">
        <el-form-item label="产品条码:" prop="barCode">
          <el-select v-model="remove.barCode" placeholder="请选择" clearable @change="getOptions">
            <el-option
              v-for="item in queryInfo.barCodeList"
              :key="item"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原货位编号:" prop="fromLocationId">
            <el-select v-model="remove.fromLocationId" placeholder="请选择入库区货位" clearable @change="getOptions">
              <el-option
                v-for="item in queryInfo.fromLocationIdList"
                :key="item"
                :label="item"
                :value="item"
                >
              </el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="货位编号:" prop="v">
            <el-select v-model="remove.locationId" placeholder="请选择入库区货位" clearable @change="getOptions">
              <el-option
                v-for="item in queryInfo.locationIdList"
                :key="item"
                :label="item"
                :value="item"
                >
              </el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item label="数量:" prop="count">
          <el-input-number v-model="remove.count" controls-position="right" :min="0" :max="availableQuantity"></el-input-number>
        </el-form-item>

      </el-form>
      <el-button type="primary" icon="el-icon-plus" class="btm" @click="addRemove">创建移库单</el-button>

    </div>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      user: '',
      queryInfo: {
        barCodeList: '',
        // locationIdList:'',
        fromLocationIdList: '',
        count: ''
      },
      availableQuantity: 0,
      remove: {
        removeId: '',
        barCode: '',
        // locationId:'',
        fromLocationId: '',
        createPerson: '',
        count: '',
        status: ''
      },
      rules: {
        receivingId: [
          { required: true, message: '请输入条码', trigger: 'blur' }
        ]
        // locationId:[
        //   { required: true, message: '请输入源货位编码', trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    getTime () {
      const now = new Date()
      this.remove.removeId = 'RE' + now.getTime()
    },
    async getOptions () {
      const { data: result } = await this.$http.get('/remove/getQuery', { params: this.remove })
      if (result.status === 201) return this.$message.error('获取列表失败')
      this.queryInfo.barCodeList = result.data.barCodeList
      // this.queryInfo.locationIdList = result.data.locationIdList
      this.queryInfo.fromLocationIdList = result.data.fromLocationIdList
      this.availableQuantity = result.data.availableQuantity
    },

    addRemove () {
      this.$refs.onRemoveRuleForm.validate(async validate => {
        if (!validate) return this.$message.error('请输入必填项')
        if (this.remove.count === 0) return this.$message.error('商品数量为零')
        this.remove.status = '待审核'
        this.remove.createPerson = this.user
        this.getTime()
        const { data: result } = await this.$http.post('/remove/addRemove', this.remove)
        if (result.status === 201) return this.$message.error('添加失败')
        this.$refs.onRemoveRuleForm.resetFields()
      })
    }

  },
  mounted () {
    this.getOptions()

    this.user = window.sessionStorage.getItem('token').substr(32)
  }
}
</script>

<style>
  .box-card{
    height: 95%;
    width: 95%;

  }
  .form{
    position: absolute;
    top: 40%;
    left: 35%;
    /* right: 20%; */
  }
  .btm{
    /* align-items: center; */
    position: absolute;
    left: 60%;
  }
</style>
